/** *
Copyright (c) 2020 kedacom * OpenATC is licensed under Mulan PSL v2. * You
can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at: *
http://license.coscl.org.cn/MulanPSL2 * THIS SOFTWARE IS PROVIDED ON AN 'AS IS'
BASIS, WITHOUT WARRANTIES OF ANY KIND, * EITHER EXPRESS OR IMPLIED, INCLUDING
BUT NOT LIMITED TO NON-INFRINGEMENT, * MERCHANTABILITY OR FIT FOR A PARTICULAR
PURPOSE. * See the Mulan PSL v2 for more details.
**/
<template>
  <div class="terminal-lock-container" v-show="isConfigShow">
    <div class="header">
      <div class="title">
        <!-- {{curDevice ? curDevice.name : ''}} -->
        <el-tooltip v-if="curDevice && curDevice.name && curDevice.name.length > 26" placement="bottom-start" effect="dark">
          <div slot="content">{{curDevice.name}}</div>
          <span class="name">{{curDevice.name.substr(0, 26) + '...'}}</span>
        </el-tooltip>
        <span v-else>{{curDevice ? curDevice.name : ''}}</span>
      </div>
      <div class="close" @click="onLeftCloseClick"><i class="el-icon-close"></i></div>
    </div>
    <div class="content">
      <Flv v-if="isConfigShow && zoomBiz === 'play'" :curDevVideos="curDevice ? curDevice.videos : []" :autoPlay="false"></Flv>
      <div class="content-config" v-if="isConfigShow && zoomBiz === 'config'">
        <div class="params">
          <div class="param">
            <div class="label">
              {{$t('openatccomponents.phase.greenclear') + ':'}}
            </div>
            <div class="value">
              <el-input-number
                :min="0"
                :max="65535"
                :precision="0"
                :step="1"
                :controls="false"
                v-model.number="manualInfo.greenflash"
                size="mini"
              ></el-input-number>
            </div>
          </div>
          <div class="param">
            <div class="label">
              {{$t('openatccomponents.overview.duration') + ':'}}
            </div>
            <div class="value">
              <el-input-number
                :min="0"
                :max="65535"
                :precision="0"
                :step="1"
                :controls="false"
                v-model.number="manualInfo.duration"
                size="mini"
              ></el-input-number>
            </div>
          </div>
          <div class="param">
            <div class="label">
              {{$t('openatccomponents.overview.yellowflash') + ':'}}
            </div>
            <div class="value">
              <el-input-number
                :min="0"
                :max="65535"
                :precision="0"
                :step="1"
                :controls="false"
                v-model.number="manualInfo.yellow"
                size="mini"
              ></el-input-number>
            </div>
          </div>
          <div class="param">
            <div class="label">
              {{$t('openatccomponents.overview.allred') + ':'}}
            </div>
            <div class="value">
              <el-input-number
                :min="0"
                :max="65535"
                :precision="0"
                :step="1"
                :controls="false"
                v-model.number="manualInfo.redclear"
                size="mini"
              ></el-input-number>
            </div>
          </div>
          <div class="param">
            <div class="label">
              {{$t('openatccomponents.phase.mingreen') + ':'}}
            </div>
            <div class="value">
              <el-input-number
                :min="0"
                :max="65535"
                :precision="0"
                :step="1"
                :controls="false"
                v-model.number="manualInfo.mingreen"
                size="mini"
              ></el-input-number>
            </div>
          </div>
        </div>
        <div class="info">{{$t('openatc.dutyroute.configInfo')}}</div>
        <div class="main">
          <intersection-direction-selection
            v-if="isConfigShow && zoomBiz === 'config'"
            :agentId="curDevice.agentid"
            :roadDirection="roadDirection"
            :choosedDirection="curDevice.data.data.direction"
            :choosedPedDirection="curDevice.data.data.peddirection"
            @handleClickCrossIcon="handleClickCrossIcon" />
        </div>
        <div class="bottom">
          <template v-if="operation === 'save'">
            <el-button size="small" type="primary" @click="onSureClick">{{$t('openatc.button.OK')}}</el-button>
          </template>
          <template v-else>
            <el-button size="small" type="primary" @click="onExecClick">{{$t('openatc.button.execute')}}</el-button>
            <el-button size="small" @click="onRecoverClick">{{$t('openatc.bottleneckcontrol.recovery')}}</el-button>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Flv from '../Flvjs/index.vue'
// @ts-ignore
import { putControl } from '../../api/control'
import { getMessageByCode } from '../../utils/responseMessage'
import { mapState } from 'vuex'
export default {
  name: 'TerminalLock',
  components: {
    Flv
  },
  props: {
    curDevice: {
      type: Object,
      default: () => {}
    },
    isConfigShow: {
      type: Boolean,
      defaultValue: true
    },
    operation: {
      type: String,
      default: 'config' // save
    },
    zoomBiz: {
      type: String,
      default: 'config' // config, play
    }
  },
  computed: {
    // @ts-ignore
    ...mapState({
      roadDirection: state => state.globalParam.roadDirection
    })
  },
  watch: {
    curDevice: {
      handler: function (val, oldVal) {
        if (val) {
          this.manualInfo = val.data.data
        }
      },
      deep: true
    }
  },
  data () {
    return {
      manualInfo: {},
      isShow: true,
      // isConfigShow: false,
      autoPlay: true
    }
  },
  methods: {
    onLeftCloseClick () {
      // this.isConfigShow = false
      this.$emit('onCloseClick')
    },
    onRecoverClick () {
      const recoverData = {
        control: 0,
        terminal: 0,
        value: 0,
        delay: 0,
        duration: 300
      }
      const reqData = {
        param: recoverData,
        agentid: this.curDevice.agentid
      }
      this.putControl(reqData)
    },
    onExecClick () {
      const spData = JSON.parse(JSON.stringify(this.curDevice.data))
      delete spData.data.iconList
      const reqData = {
        param: spData,
        agentid: this.curDevice.agentid
      }
      if (!this.curDevice.data.data.direction || this.curDevice.data.data.direction.length === 0) {
        this.$message.error(this.$t('openatccomponents.overview.directionnull'))
        return
      }
      this.putControl(reqData)
    },
    async putControl (reqData) {
      let message = ''
      let data = await putControl(reqData)
      let success = 0
      if (!data.data.success) {
        message = getMessageByCode(data.data.code, this.$i18n.locale)
      } else {
        if (data.data.data && data.data.data.data) {
          success = data.data.data.data.success
          if (success !== 0) {
            let errormsg = 'openatccomponents.overview.putTscControlError' + success
            message = errormsg
          }
        }
      }
      if (message === '') {
        this.$message.success(this.$t('openatccomponents.common.download'))
      } else {
        this.$message.success(message)
      }
      return message
    },
    onSureClick () {
      this.$emit('onSaveClick', this.manualInfo)
      this.isConfigShow = false
    },
    handleClickCrossIcon (allChoosedDir, curClickedPhase) {
      this.curDevice.data.data.direction = allChoosedDir.direction
      this.curDevice.data.data.peddirection = allChoosedDir.peddirection
      console.log('handleClickCrossIcon', allChoosedDir, curClickedPhase)
    },
    onCloseClick () {
      this.isShow = false
    },
    show () {
      this.isShow = true
    }
  }
}
</script>
<style scoped></style>
